import type { Directive, DirectiveBinding } from "vue";

/**
 * 监控元素大小变化
 * v-obElementSize="handleElSizeChange"
 * const handleElSizeChange = (rect: DOMRectReadOnly) => {}
 */
const obElementSize: Directive = {
    mounted(el: HTMLElement, binding: DirectiveBinding) {
        // 监听元素大小变化
        const observer = new ResizeObserver((entries: ResizeObserverEntry[]) => {
            // 执行绑定的函数
            binding.value(entries[0].contentRect);
        });
        // 监听目标元素
        observer.observe(el);
    }
};

export default obElementSize;
